<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="品牌">
              <a-select v-model="queryParam.brandId" placeholder="请选择" default-value="all" :dropdownStyle="{ zIndex: '5' }" @change="e => handleChangeSelect(e, 'brand')">
                <a-select-option value="all">全部</a-select-option>
                <a-select-option v-for="(item, index) in brandList" :key="index" :value="item.key">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="大类">
              <a-select v-model="queryParam.categoryId" placeholder="请选择" default-value="all" :dropdownStyle="{ zIndex: '5' }" @change="e => handleChangeSelect(e, 'big')">
                <a-select-option value="all">全部</a-select-option>
                <a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.key">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden', marginBottom: 0 }">
              <a-button type="primary" @click="searchList">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="ant-pro-pages-list-projects-cardList" style="clear:both;">
      <a-list :loading="loading" :data-source="goodsList" :grid="{ gutter: 0 }">
        <div v-if="showLoadingMore" slot="loadMore" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
          <a-spin v-if="loadingMore" />
          <a-button v-else @click="onLoadMore">
            loading more
          </a-button>
        </div>
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-card class="ant-pro-pages-list-projects-card" hoverable>
            <img slot="cover" :src="item.imageurl != null ? item.imageurl : 'https://img.bzhz.jnbygroup.com/cloth.png'" :alt="item.value" @click="open(item)" />
            <span class="score">{{ (item.score * 10).toFixed(1) }}</span>
            <p>款号：{{ item.name }}</p>
            <div class="cardItemContent">
              <h3>{{ item.brand }} {{ item.value }}</h3>
              <p class="red">吊牌价:¥{{ item.price }}.00</p>
              <p class="blue">库存：{{ item.stock }}</p>
              <p>{{ item.mark_style }}</p>
              <p>{{ item.colors_code }}/{{ item.colors }} {{ item.m_size }}</p>
            </div>
            <div class="btn">
              <a-button type="primary" icon="plus" :loading="item.iconLoading" @click="addGoods(item, index)" block></a-button>
            </div>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
    <a-button class="refresh" @click="refresh" v-show="showfresh">点击刷新</a-button>
  </div>
</template>
<script>
import { Ellipsis } from '../../../components'
import { aiSingle, queryDim, addStylingCart, goodsDetail } from '@/api/box/workbench'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
export default {
  props: {
    unionId: {
      type: String,
      default: ''
    }
  },
  components: {
    Ellipsis
  },
  data() {
    return {
      categoryList: [],
      brandList: [],
      checked: [],
      pageSize: 25,
      current: 1,
      total: 0,
      queryParam: {
        categoryId: 'all',
        brandId: 'all'
      },
      goodsList: [],
      form: this.$form.createForm(this),
      loading: true,
      loadingMore: false,
      showLoadingMore: false,
      userInfo: Vue.ls.get(USER_INFO),
      showfresh: false
    }
  },
  watch: {
    unionId(value, oldvalue) {
      console.log(value, oldvalue)
    }
  },
  mounted() {
    this.getSelectList()
    // this.getList()
  },
  methods: {
    searchList() {
      console.log(12)
      this.current = 1
      this.goodsList = []
      this.getList()
    },
    resetList() {
      this.queryParam = {
        categoryId: 'all',
        brandId: 'all'
      }
      this.current = 1
      this.goodsList = []
      this.getList()
    },
    // select Change
    handleChangeSelect(value, type) {
      switch (type) {
        case 'big':
          /* const option = this.categoryList.filter(item => {
                if (item.key === value) {
                  return item
                }
              })
              this.brandList = option[0].brands
              this.queryParam.brandId = 'all' */
          break
      }
    },
    getSelectList() {
      queryDim()
        .then(res => {
          // console.log(res)
          if (res.code === 0) {
            this.categoryList = res.data.categoryTrees
            this.brandList = this.categoryList[0].brands
            this.queryParam.brandId = this.brandList[0].key
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('getSelectList:' + err)
        })
    },
    getList() {
      const data = {
        page: {
          pageNo: this.current,
          pageSize: this.pageSize
        },
        requestData: {
          unionId: this.unionId // 'oZpUxs1utN7-JLtQAD5AMcW_nIPM'
        }
      }
      if (this.queryParam.brandId !== '' && this.queryParam.brandId !== 'all') {
        data.requestData.brandId = this.queryParam.brandId
      }
      if (this.queryParam.categoryId !== '' && this.queryParam.categoryId !== 'all') {
        data.requestData.categoryId = this.queryParam.categoryId
      }
      aiSingle(data)
        .then(res => {
          // console.log(res)
          if (res.code === 0) {
            const dataList = res.data.map(item => {
              const iconLoading = false
              return {
                ...item,
                iconLoading
              }
            })
            this.goodsList = this.goodsList.concat(dataList)
            this.loading = false
            this.loadingMore = false
            this.current = res.page.pageNo
            this.total = res.page.count
            if (res.page.pageNo < res.page.pages) {
              this.showLoadingMore = true
            } else {
              this.showLoadingMore = false
            }
            /* this.goodsList
              .sort((a, b) => {
                return a.stock - b.stock
              })
              .reverse() */
          } else if (res.code === 1001) {
            this.loading = false
            this.showfresh = true
          } else {
            this.loading = false
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('getList:' + err)
        })
    },
    onLoadMore() {
      this.loadingMore = true
      this.current += 1
      this.getList()
      // this.getData(res => {
      //   this.data = this.data.concat(res.results)
      //   this.loadingMore = false
      //   this.$nextTick(() => {
      //     window.dispatchEvent(new Event('resize'))
      //   })
      // })
    },
    // 添加商品至购物车
    addGoods(item, index) {
      console.log(item, index)
      if (item.stock <= 0) {
        this.$message.error('该商品库存为0！')
      } else {
        this.goodsList[index].iconLoading = true
        setTimeout(() => {
          this.goodsList[index].iconLoading = false
        }, 1000)
        const value = {
          colorName: item.colors,
          colorNo: item.colors_code,
          imgUrl: item.imageurl,
          price: item.price,
          productCode: item.name,
          productId: item.m_product_id,
          productName: item.value,
          sizeName: item.m_size,
          sizeNo: item.recom_size,
          skuCode: item.no,
          skuId: item.m_productalias_id,
          unionId: item.unionid
        }
        console.log(value)
        const data = {
          requestData: value,
          user_id: this.userInfo.id
        }
        addStylingCart(data)
          .then(res => {
            // console.log(res)
            if (res.code === 0) {
              this.$message.success('添加成功！')
              this.$emit('refreshShoppingCart', true)
            } else {
              this.$message.success(res.msg, 5)
            }
          })
          .catch(err => {
            console.log('添加商品' + err)
          })
      }
    },
    // 查看商品信息
    open(item) {
      const data = {
        requestData: {
          productId: item.m_product_id,
          skuId: item.m_productalias_id
        }
      }
      goodsDetail(data)
        .then(res => {
          if (res.code === 0) {
            this.$emit('openInfo', true, res.data, '单品')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('查看商品信息:' + err)
        })
    },
    // 刷新
    refresh() {
      this.showfresh = false
      this.getSelectList()
    }
  }
}
</script>
<style lang="less" scoped>
.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;
  height: 100%;
  min-height: 200px;
  /deep/ .ant-row {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 174px);
    // grid-row-gap: 16px;
    grid-column-gap: 8px;
  }
  /deep/ .ant-row::before {
    content: '';
    width: 0;
    display: none;
  }
  /deep/ .ant-list-item {
    margin-bottom: 24px;
    .ant-card-hoverable {
      cursor: default;
    }
  }
  /deep/ .ant-card {
    width: 174px;
    position: relative;
    overflow: hidden;
    padding: 16px;
  }
  /deep/ .ant-card-hoverable:hover {
    border: 1px solid #1890ff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
  }
  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }
  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }
  /deep/ .ant-card-cover {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
      border-radius: 4px;
    }
  }
  /deep/ .ant-card-body {
    padding: 0 0 24px;
    position: relative;
    height: 185px;
    > p {
      margin-top: -30px;
      background: rgba(0, 0, 0, 0.4);
      line-height: 30px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      border-radius: 0 0 4px 4px;
    }
    .score {
      background: #1890ff;
      color: #fff;
      font-size: 12px;
      display: block;
      position: absolute;
      z-index: 2;
      width: 37px;
      height: 18px;
      border-radius: 4px;
      text-align: center;
      line-height: 18px;
      top: -140px;
      right: 0;
    }
  }
  .cardItemContent {
    padding: 0px 0 6px;
    line-height: 20px;
    > p {
      color: #cdcdcd;
      font-size: 12px;
      line-height: 20px;
      margin-bottom: 0;
      border-radius: 0 0 4px 4px;
    }
    > h3 {
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 0;
    }
    .red {
      color: #f45555;
      font-size: 14px;
      line-height: 26px;
    }
    .blue {
      color: #1890ff;
    }
    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }
  .btn {
    position: absolute;
    height: 24px;
    bottom: 0;
    width: 100%;
    button {
      height: 24px;
      border-radius: 6px;
    }
    button:active {
      transform: scale(0.9);
    }
  }
  /deep/ .ant-checkbox-group {
    width: 100%;
  }

  /deep/ .ant-list-pagination {
    margin-top: 0;
  }
  .checkbox {
    position: absolute;
    bottom: -1px;
    z-index: 1;
    height: 24px;
    width: 100%;
    display: block;
    /deep/ .ant-checkbox {
      width: 100%;
      height: 24px;
      display: block;
      .ant-checkbox-input {
        width: 100%;
      }
      .ant-checkbox-inner {
        width: 100%;
        height: 24px;
        background: #848484;
        border: none;
        left: 0;
        bottom: 0;
        position: absolute;
        border-radius: 6px;
      }
      .ant-checkbox-inner::before {
        content: '';
        position: absolute;
        left: 52%;
        top: 50%;
        width: 10px;
        margin-left: -9px;
        margin-top: -1px;
        border-top: 2px solid #fff;
        -webkit-transition: all 0.05s;
        transition: all 0.05s;
      }
      .ant-checkbox-inner::after {
        opacity: 1;
        content: '';
        display: initial;
        transform: initial;
        position: absolute;
        left: 52%;
        top: 50%;
        height: 10px;
        margin-left: -5px;
        margin-top: -5px;
        border: none;
        border-left: 2px solid #fff;
        -webkit-transition: all 0.05s;
        transition: all 0.05s;
      }
    }
    /deep/ .ant-checkbox-checked {
      .ant-checkbox-inner {
        background: #1890ff;
        color: white;
        text-align: center;
      }
      .ant-checkbox-inner::before {
        display: none;
      }
      .ant-checkbox-inner::after {
        position: absolute;
        display: table;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
        transform: rotate(45deg) scale(1) translate(-50%, -50%);
        opacity: 1;
        -webkit-transition: all 0.05s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.05s;
        transition: all 0.05s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.05s;
        content: ' ';
        top: 70%;
        left: 50%;
        width: 5.71428571px;
        height: 9.14285714px;
      }
    }
    /deep/ .ant-checkbox-checked::after {
      border-radius: 6px;
    }
  }
}
.table-page-search-wrapper {
  .ant-form-inline {
    /deep/ .ant-form-item {
      margin-bottom: 0;
    }
  }
}
.refresh {
  display: block;
  margin: 0 auto;
}
</style>

